<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root" onmouseenter="">

    </div>
</body>
<script src="../react.js"></script>
<script src="../react-dom.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
/*    使用jsx 绑定事件 on+事件名称 
      事件名称首字母必须大写(小驼峰命名法)   onClick onMouseenter onChange
      事件函数不能直接调用否则会立即执行 
  // jsx 绑定事件默认不可以加小括号 ，否则会默认调用
      */
    let div = (
        <div>
            <button onClick={clickMe}>点我一下你试试</button>  
            
            {/*事件函数传参 */}
            <button onClick={()=>{
                clickParams("学习")
            }}>事件传递参数</button> 
            <button onClick={()=>{
                alert("点了")
            }}>点我一下</button>
            <button onDoubleClick={()=>{
                alert("双击了")
            }}>双击事件</button>
            <button onMouseEnter={()=>{
                console.log("移入了")
            }}>移入触发</button>
            <input type="text" onChange={()=>{
                console.log("内容发生改变了")
            }}/>
        </div>
    )
    function clickMe(){
        alert("点你咋地")
    }
    function clickParams(msg){
        alert(msg)
    }
    // 渲染到dom
    ReactDOM.render(div,document.getElementById("root"))
</script>
</html>